<template>
  <section>
    <search-box>
      <div>
        <div class="search-box">
          <div class="search-input">
            <el-select v-model="search_item">
              <el-option v-for="(value, key) in search_list" :key="key" :value="key" :label="value.label"></el-option>
            </el-select>
          </div>
          <div class="search-input">
            <el-input v-model="search_list[search_item].value"></el-input>
          </div>
          <div class="search-input m-left20">
            <el-button type="primary" @click="FnGetSnatList(1)">查询</el-button>
          </div>
        </div>
      </div>
    </search-box>

    <el-table :data="snat_list" border stripe>
      <el-table-column min-width="130" prop="nat_id" label="nat_id"></el-table-column>
      <el-table-column min-width="130" prop="nat_name" label="nat_name"></el-table-column>
      <el-table-column min-width="80" prop="nat_type" label="Nat类型"></el-table-column>
      <el-table-column min-width="300" label="绑定云主机信息">
        <template #default="scope">
          <template v-if="scope.row.vms && scope.row.vms.length > 0">
            <div style="margin-bottom:8px;" v-for="(m, i) in scope.row.vms" :key="i">
              <span class="m-right10"><b>vm_name:</b> {{m.vm_name}}</span>
              <span class="m-right10"><b>vm_id:</b> {{m.vm_id}}</span>
              <span><b>host_name:</b> {{m.node_host_name}}</span>
            </div>
          </template>
        </template>
      </el-table-column>
<!--      <el-table-column min-width="130" prop="nat_private_ip" label="Nat私网ip"></el-table-column>-->
<!--      <el-table-column min-width="130" prop="nat_public_ip" label="Nat公网ip"></el-table-column>-->
      <el-table-column min-width="130" prop="ros_vm_id" label="ros云主机id"></el-table-column>
      <el-table-column min-width="130" prop="ros_vm_name" label="ros云主机名称"></el-table-column>
      <el-table-column min-width="80" prop="nat_status" label="Nat状态"></el-table-column>
      <el-table-column width="260" prop="cluster_id" label="绑定集群id">
        <template #default="scope">
          <copy :str="scope.row.cluster_id"></copy>
          <el-button type="text"
                     @click="$router.push({name: 'cluster_list', query: {cluster_id: scope.row.cluster_id}})">{{scope.row.cluster_id}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column min-width="130" prop="cluster_name" label="绑定集群name"></el-table-column>
      <el-table-column min-width="130" prop="customer_id" label="用户customerid"></el-table-column>
      <el-table-column min-width="130" prop="user_id" label="用户id"></el-table-column>
      <el-table-column min-width="130" label="管理">
        <template #default="scope">
          <el-button
                  type="text"
                  v-if="scope.row.nat_type == 'dpvs'"
                  :disabled="FnBtnDisabled('viewDpvs')"
                  @click="$router.push({name: 'dpvs_manage_list', params: {dpvs_id: scope.row.nat_vm_name}})"
          >查看dpvs</el-button>
          <el-button
                  type="text"
                  v-if="scope.row.nat_type == 'ros'"
                  @click="FnControl(scope.row)"
                  :disabled="FnBtnDisabled('dpvsControl')"
          >控制台</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="page_index"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import searchBox from '../../components/search-box.vue'
import Service from '@/service/cluster/snat.js'
import {authBtnDisabled} from '@/utils/auth.js'
import copy from '../../components/copy.vue'
export default {
  components: { searchBox, copy },
  data() {
    return {
      search_item: "cluster_id",
      search_list: {
        // cluster_name: {label: "集群名称", value: ""},
        cluster_id: {label: "集群ID", value: ""},
        // name: {label: "节点名称", value: ""}
        customer_id: {label: "customer_id", value: ""}
      },
      snat_list: [],
      page_index: 1,
      page_size: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.FnGetSnatList()
    },
    FnGetSnatList(page) {
      if(page) this.page_index = page
      let reqData = {
        pageNumber: this.page_index,
        pageSize: this.page_size,
      }
      if(this.search_list[this.search_item].value) reqData[this.search_item] = this.search_list[this.search_item].value
      Service.get_snat_list(reqData).then(resData => {
        if(resData.code == "Success") {
          this.snat_list = resData.data.nats
          this.total = resData.data.nat_count
        }
      })
    },
    FnControl(row) {
      let url = window.location.origin + `/console/${row.ros_vm_id}/centos/${row.ros_vm_name}`
      window.open(url, '_blank')
    },
    FnBtnDisabled(key) {
      return authBtnDisabled(key, this.$route.meta.name)
    }
  },
  created() {
    if(this.$route.query.id) {
      this.search_list.cluster_id.value = this.$route.query.id
      this.FnGetSnatList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
}
.m-bottom10 {
  margin-bottom: 10px;
}
.m-right10 {
  margin-right: 10px;
}
.search-input {
  width: 220px;
  margin-right: 20px;
  position: relative;
  .require-icon {
    position: absolute;
    right: 8px;
    top: 6px;
    color: #DA3B18;
    font-size: 20px;
  }
}
.page-box {
  margin-top: 10px;
  text-align: right;
}
</style>